<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>

</div>

<template id="temp">
    <div>
        <h1>这是Account组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>

        <router-view></router-view>

    </div>
</template>
<script>

    let account = {
        template: '#temp',
    }
    let login = {
        template: '<h3>登录</h3>',
    }
    let register = {
        template: '<h3>注册</h3>',
    }
    let router = new VueRouter({
        routes: [
            {
                path: '/account', component: account,

                //使用 children 属性实现 子路由： 同时子路由的path前面不用带'/'，否则就是从根路径开始请求。
                children: [
                    {path: '', redirect: 'login'}, // 默认路由
                    {path: 'login', component: login},
                    {path: 'register', component: register},
                ],

            },

            // {path: '/account/login', component: login},
            // {path: '/account/register', component: register},
        ],

    })


    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router,
    })
</script>
</body>
</html>
